<template>
  <div>
    <transition-group name="detail-fade">
      <div class="tabs-detail" v-show="showDetail" :key="1">
        <div class="title">全部</div>
        <ul class="tabs-btn-wrap">
          <li
            class="tabs-btn"
            v-for="(item, index) of tabs"
            :key="index"
            :class="isActive(index)"
            @click="toggleComp(index)"
          >
            {{ item.name }}
          </li>
        </ul>
      </div>
      <div
        class="detail-mask"
        v-show="showDetail"
        @click="toggleShowDetail"
        :key="2"
      ></div>
    </transition-group>
  </div>
</template>

<script type="text/ecmascript-6">
import { tabsDetailMixin } from 'assets/js/mixin'

export default {
  mixins: [tabsDetailMixin],
  props: {
    showDetail: {
      type: Boolean,
      default: false
    },
    tabs: {
      type: Array,
      default() {
        return []
      }
    }
  },
  methods: {
    toggleShowDetail() {
      this.$parent.toggleDetail()
    },
    toggleComp(index) {
      this.$parent.toggleDetail()
      this.setShowCompIndex(index)
    }

  }
}

</script>

<style lang="stylus" scoped ref="stylesheet/stylus">
.tabs-detail {
  z-index: 10;
  position: fixed;
  left: 0;
  top: 0.84rem;
  width: 100%;
  height: 2.51rem;
  background: #f2f2f2;
  padding: 0 0.25rem;
  box-sizing: border-box;
  overflow: hidden;

  .title {
    padding-top: 0.25rem;
    font-size: 0.28rem;
    color: #3c3c3c;
  }

  .tabs-btn-wrap {
    margin-top: 0.34rem;

    .tabs-btn {
      margin-bottom: 0.24rem;
      margin-right: 0.2rem;
      display: inline-block;
      width: 1.52rem;
      height: 0.56rem;
      text-align: center;
      line-height: 0.56rem;
      border: 1px solid #e5e5e5;
      border-radius: 4px;
      font-size: 0.25rem;
      background-color: #fff;
      box-sizing: border-box;
      color: #3c3c3c;

      &:nth-child(4) {
        margin-right: 0;
      }

      &.actived {
        background-color: #fde0d5;
        border-color: #ff6700;
        color: #ff6700;
      }
    }
  }

  &.detail-fade-enter-active {
    transition: all 0.3s;
  }

  &.detail-fade-enter, &.detail-fade-leave-to {
    opacity: 5;
    // transform: translate3d(0, -100%, 0);
    height: 0.57rem;
  }
}

.detail-mask {
  z-index: 9;
  opacity: 0.5;
  position: fixed;
  top: 1.41rem;
  left: 0;
  bottom: 52px;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.3);
}
</style>